<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天猫购物车</title>
    <link rel="stylesheet" href="css/天猫购物车.css"/>
    <link rel="stylesheet" href="css/reset.css"/>
    <!--<link rel="stylesheet" href="js/天猫购物车js.js"/>-->
    <script src="js/angular.min.js"></script>
    <script src="js/angular-route.min.js"></script>
</head>
<body>
<div id="wrap">
    <!--头部导航-->
    <header id="header">
        <div class="header-top">
            <!--头部左边导航-->
            <ul class="header-top-l fl">
                <li class="header-top-L-li1">
                    <!--账号、会员等级，及下拉菜单-->
                    <div class="header-top-l-t">
                        <a href="#" class="header-top-l-acc db">账号123</a>
                        <a href="#" class="vip-1 db"></a>
                        <i class="header-top-l-i db"></i>
                    </div>
                    <!--下拉菜单-->
                    <div class="header-top-l-b">
                        <!-- 上面-->
                        <div class="header-top-l-b-bd">
                            <a href="#" class="db header-top-head fl">
                                <img src="img/账号头像.jpg" alt=""/>
                            </a>
                            <div class="user-info fl">
                                <p class="z1">
                                    <a href="#">账号管理</a>
                                    <span>|</span>
                                    <a href="#">退出</a>
                                </p>
                                <p class="z2"></p>
                                <p>
                                    <a href="#">
                                        我可尊享 <span>1</span>项特权
                                    </a>
                                </p>
                            </div>
                            <div class="user-tip fl">
                                <p>
                                    <a href="#">
                                        距离<span>生日特权</span>开始还剩 <span>284</span>天
                                    </a>
                                </p>
                            </div>
                        </div>
                        <!--下面-->
                        <div class="header-top-l-b-bb">
                            <div>
                                <a href="#" class="db fl">
                                    <img src="img/生日特权.png" alt="生日特权"/>
                                    生日特权
                                </a>
                            </div>
                        </div>
                    </div>

                </li>
                <!--消息-->
                <li class="header-top-L-li1">
                    <div class="header-L-2">
                        <span class="xx db fl"></span>
                        <span class="fl db">消息</span>
                        <i class="header-top-l-i db fl tt"></i>
                        <div class="header-top-l-b menu-bd">
                            <div class="header-L-2-b">
                                <h2>未读新消息</h2>
                                <div class="header-L-2-b-b">
                                    <p>
                                        <img src="img/左引号.png" alt=""/>
                                        <span>没有新消息了</span>
                                        <img src="img/右引号.png" alt=""/>
                                    </p>
                                    <div></div>
                                    <a href="#" class="but-msg db">查看之前消息</a>
                                </div>
                                <div class="header-L-2-b-f">
                                    <a href="#" title="消息设置" class="db fl"></a>
                                    <a href="#" title="意见反馈" class="db fl"></a>
                                    <span class="db fr">
                                        <a href="#">查看全部</a>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <!--手机淘宝-->
                <li>
                    <a href="#">手机淘宝</a>
                </li>
            </ul>
            <!--头部右边导航-->
            <ul class="header-top-R fr header-top-l">
                <li>
                    <a href="#" >淘宝网首页</a>
                </li>
                <li class="header-top-L-li1">
                    <a href="#" class="db">我的淘宝</a>
                    <i class="header-top-l-i db"></i>
                    <div class="header-top-l-b header-fr-2">
                        <a href="#">已买到的宝贝</a>
                        <a href="#">我的足迹</a>
                        <a href="#">爱逛街</a>
                        <a href="#">淘宝达人</a>
                        <a href="#">新欢</a>
                    </div>
                </li>
                <li>
                    <a href="#" class="db header-fr-3">
                         <i class="db"></i>
                            购物车
                        <strong>0</strong>
                      </a>
                    <i class="header-top-l-i db"></i>
                </li>
                <li class="header-top-L-li1">
                    <a href="#" class="db header-fr-4">
                        <i class="db"></i>
                        <span>收藏夹</span>
                    </a>
                    <i class="header-top-l-i db"></i>
                    <div class="header-top-l-b header-fr-2">
                        <a href="#">收藏的宝贝</a>
                        <a href="#">收藏的店铺</a>
                    </div>
                </li>
                <li>
                    <a href="#">商家分类</a>
                </li>
                <li>|</li>
                <li class="header-top-L-li1">
                    <a href="#" class="db">卖家中心</a>
                    <i class="header-top-l-i db"></i>
                    <div class="header-top-l-b header-fr-2">
                        <a href="#">免费开店</a>
                        <a href="#">已卖出的宝贝</a>
                        <a href="#">出售中的宝贝</a>
                        <a href="#">卖家服务市场</a>
                        <a href="#">卖家培训中心</a>
                    </div>
                </li>
                <li class="header-top-L-li1">
                    <a href="#" class="db">联系客服</a>
                    <i class="header-top-l-i db"></i>
                    <div class="header-top-l-b header-fr-2">
                        <a href="#">消费者客服</a>
                        <a href="#">卖家客服</a>
                    </div>
                </li>
                <li class="header-top-L-li1">
                    <a href="#" class="header-fr-5">
                        <i class="db"></i>
                        <span> 网站导航</span>
                    </a>
                    <i class="header-top-l-i db"></i>
                    <div class="header-top-l-b" id="header_foot">
                        <!--主体市场-->
                        <div>
                            <div>
                                <h3 style="color: #FC560B;">主体市场</h3>
                            </div>
                            <ul class="uls1">

                            </ul>
                        </div>
                        <!--特色购物-->
                        <div>
                            <div>
                                <h3 style="color: #A9C161;">特色购物</h3>
                            </div>
                            <ul class="header-Li2 uls2">

                            </ul>
                        </div>
                        <!--当前热点-->
                        <div>
                            <div>
                                <h3 style="color: #E066B1;">当前热点</h3>
                            </div>
                            <ul class="header-Li2 uls3">

                            </ul>
                        </div>
                        <!--更多精彩-->
                        <div>
                            <div>
                                <h3 style="color: #5AAADF;">更多精彩</h3>
                            </div>
                            <ul style="border-right: none"class="header-Li2 uls4">

                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </header>
    <!--内容部分-->
    <section id="content">
        <article id="logo">
            <div class="logo-L fl">
                <a href="#" class="db"></a>
            </div>
            <!--搜素框-->
            <div class="fr logo-R">
                <div class="logo-R-L fl">
                    <!--<select name="" id="opa">-->
                        <!--<option value=""><a href="#">宝贝</a></option>-->
                        <!--<option value=""><a href="#">天猫</a></option>-->
                        <!--<option value=""><a href="#">店铺</a></option>-->
                    <!--</select>-->
                    <ul>
                        <li>
                            <a href="#">宝贝</a>
                        </li>
                        <li>
                            <a href="#">天猫</a>
                        </li>
                        <li>
                            <a href="#">店铺</a>
                        </li>
                    </ul>
                    <i class="header-top-l-i db logo-R-i"></i>
                </div>
                <!--表单-->
                <div class="fl logo-R-C">
                    <i class="db logo-SS"></i>
                    <form action="#" class="fl">
                        <input type="text"/>
                    </form>

                </div>
                <button class="btn"></button>
            </div>
        </article>
        <!--内容部分-->
        <div class="outer">
            <div class="outer-T">
                <div class="fl">
                    <ul class="makeUL">
                        <li class="makeP">
                            <a href="#" class="db">
                                <span>全部商品</span>
                                <span>0</span>
                                <span class="pipe"></span>
                            </a>
                        </li>
                        <li class="makeP lis2" id="lis2">
                            <a href="#">
                                <span>降价商品</span>
                                <span>0</span>
                                <span class="pipe"></span>
                            </a>
                        </li>
                        <li class="makeP lis3" style="transition: all 2s ease;">
                            <a href="#">
                                <span>库存紧张</span>
                                <span>0</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="fr cart-sum">
                    <span>已选商品（不含运费）</span>
                    <span>&nbsp;0.00</span>
                    <a href="#" class="db">结算</a>
                </div>
                <div style="clear: both"></div>
                <div class="make-B">
                    <div id="aa"></div>
                </div>
            </div>
            <div class="outer-BT">
                <div class="fl">
                    <div class="outer-bbL fl">
                        <div class="kuang2 bjtu"></div>
                        <div class="xuan2"></div>
                    </div> &nbsp;&nbsp;全选
                </div>
                <div class="fl">
                    商品信息
                </div>
                <div class="fl">
                    单价
                </div>
                <div class="fl">
                    数量
                </div>
                <div class="fl">
                    金额
                </div>
                <div class="fl">
                    操作
                </div>
            </div>
            <!--商品内容部分-->
            <div class="outer-boxx">
                <!--第一块-->
                <div class="outer-con">
                    <div>
                        <div class="outer-bbL fl">
                            <div class="kuang bjtu"></div>
                            <div class="xuan"></div>
                        </div> &nbsp;&nbsp;
                        <span class="db tmao bjtu"></span>
                        &nbsp;店铺：<a href="#" class="pinpai db">asus华硕恩荣专卖</a>
                    <span class="db wwang">
                        <a href="#" class="db"></a>
                    </span>
                    <span class="db youhui bjtu">
                        <em>优惠券</em>
                        <i class="db bjtu"></i>
                        <div class="quan">
                            <i class="db bjtu quanbj"></i>
                            <div class="quanbj-con">
                                <i class="db bjtu2 quanbj-con-i"></i>
                                已领取<span>0</span> 张优惠券，有新优惠券可领取
                                <b class="db bjtu2 quanbj-con-b"></b>
                            </div>
                            <div class="quanbj-inn">
                                <div class="fl quanbj-inn-1 bjtu2">
                                    <span>¥</span>20
                                </div>
                                <div class="fl">
                                    <div class="fl xinxi">
                                        <p>满2500减20 满2500减20</p>
                                        <p>2017.02.09-2017.03.31</p>
                                    </div>
                                    <div class="fl">
                                        <span class="lingqu db">领取</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </span>
                    </div>
                    <!--详细信息-->
                    <div class="cont">
                        <div>
                            <ul>
                                <li class="td-cha">
                                    <div class="outer-bbL fr">
                                        <div class="kuang1 bjtu"></div>
                                        <div class="xuan1"></div>
                                    </div> &nbsp;&nbsp;
                                </li>
                                <li class="td-item">
                                    <div class="td-inner">
                                        <div class="fl td-pic">
                                            <a href="#"><img src="img/商品1.jpg" alt=""/></a>
                                        </div>
                                        <div class="fl item-info">
                                            <div>
                                                <a href="#" class="db">
                                                    Asus/华硕 R R417SA3160超薄手提游戏上网轻薄便携学生笔记本电脑
                                                </a>
                                            </div>
                                            <div>
                                                <div>
                                                    <p>
                                                        <img src="img/天猫家装节.jpg" alt=""/>
                                                    </p>
                                                </div>
                                                <div>
                                                <span class="db item-icon">
                                                    <img src="img/xcard.png" alt=""/>
                                                </span>
                                                    <a class="db item-icon">
                                                        <img src="img/7天退换.png" alt=""/>
                                                    </a>
                                                    <a class="db item-icon">
                                                        <img src="img/权益.png" alt=""/>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="td-info">
                                    <div class="item-props">
                                        <p class="sku-line">颜色分类：白色</p>
                                        <p class="sku-line">套餐类型：官方标配</p>
                                        <span class="db btn-sku bjtu2">修改</span>
                                    </div>
                                </li>
                                <li class="td-price">
                                    <div class="td-inner">
                                        <div class="price-content">
                                            <div class="price-line">
                                                <em class="db price-original">￥3799.00</em>
                                            </div>
                                            <div class="price-line">
                                                <em class="db price-now">￥<span class="money">3699</span>.00</em>
                                            </div>

                                        </div>
                                        <!--卖家降价-->
                                        <div class="price-proller">
                                            <div>
                                                卖家降价
                                                <i class="db bjtu cuxiao"></i>
                                            </div>
                                            <!--<div id="xinxi1">-->
                                            <!--<p>卖家降价：天猫家装节</p>-->
                                            <!--<p>优惠：￥200.00</p>-->
                                            <!--<p>比加入购物车时，又优惠了￥100.00</p>-->
                                            <!--</div>-->
                                        </div>
                                    </div>
                                </li>
                                <li class="td-amount">
                                    <div class="td-inner">
                                        <div class="item-amount ">
                                            <a href="#" class="db minus">-</a>
                                            <input type="text" value="1" class="text-amount"/>
                                            <a href="#" class="db plus">+</a>
                                        </div>
                                    </div>
                                </li>
                                <li class="td-sum">
                                    <div class="td-inner">
                                        <em class="tdinn">￥<span class="jine">3699</span>.00</em>
                                    </div>
                                </li>
                                <li class="td-op ">
                                    <div class="td-inner td-op1">
                                        <a href="#" class="btn-fav">移入收藏夹</a>
                                        <a href="#" class="btn-fav btn-re">删除</a>
                                        <div class="td-op2">
                                            <a href="#">相似宝贝</a>
                                            <i class="header-top-l-i db"></i>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--<div style="clear: both"></div>-->
                <!--商品内容部分-->
                <!--第二块-->
                <div class="outer-con">
                    <div>
                        <div class="outer-bbL fl">
                            <div class="kuang bjtu"></div>
                            <div class="xuan"></div>
                        </div> &nbsp;&nbsp;
                        <span class="db tmao bjtu"></span>
                        &nbsp;店铺：<a href="#" class="pinpai db">戴尔官方旗舰店</a>
                    <span class="db wwang">
                        <a href="#" class="db"></a>
                    </span>
                    <span class="db youhui bjtu">
                        <em>优惠券</em>
                        <i class="db bjtu"></i>
                        <div class="quan">
                            <i class="db bjtu quanbj"></i>
                            <div class="quanbj-con">
                                <i class="db bjtu2 quanbj-con-i"></i>
                                已领取<span>0</span> 张优惠券，有新优惠券可领取
                                <b class="db bjtu2 quanbj-con-b"></b>
                            </div>
                            <div class="quanbj-inn">
                                <div class="fl quanbj-inn-1 bjtu2">
                                    <span>¥</span>10
                                </div>
                                <div class="fl">
                                    <div class="fl xinxi">
                                        <p>家装节优惠券-公开 满1000减10</p>
                                        <p>2017.02.09-2017.03.31</p>
                                    </div>
                                    <div class="fl">
                                        <span class="lingqu db">领取</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </span>
                    </div>
                    <!--详细信息-->
                    <div class="cont">
                        <div>
                            <ul>
                                <li class="td-cha">
                                    <div class="outer-bbL fr">
                                        <div class="kuang1 bjtu"></div>
                                        <div class="xuan1"></div>
                                    </div> &nbsp;&nbsp;
                                </li>
                                <li class="td-item">
                                    <div class="td-inner">
                                        <div class="fl td-pic">
                                            <a href="#"><img src="img/商品2.jpg" alt=""/></a>
                                        </div>
                                        <div class="fl item-info">
                                            <div>
                                                <a href="#" class="db">
                                                    Dell/戴尔 灵越15(5567) Ins15-1545学生便携i5游戏笔记本电脑                                            </a>
                                            </div>
                                            <div>
                                                <div>
                                                    <p>
                                                        <img src="img/天猫家装节.jpg" alt=""/>
                                                    </p>
                                                </div>
                                                <div>
                                                <span class="db item-icon">
                                                    <img src="img/xcard.png" alt=""/>
                                                </span>
                                                    <a class="db item-icon">
                                                        <img src="img/7天退换.png" alt=""/>
                                                    </a>
                                                    <a class="db item-icon">
                                                        <img src="img/权益.png" alt=""/>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="td-info">
                                    <div class="item-props">
                                        <p class="sku-line">颜色分类：复古灰</p>
                                        <p class="sku-line">套餐类型：官方标配</p>
                                        <span class="db btn-sku bjtu2">修改</span>
                                    </div>
                                </li>
                                <li class="td-price">
                                    <div class="td-inner">
                                        <div class="price-content">
                                            <div class="price-line">
                                                <em class="db price-original">￥4999.00</em>
                                            </div>
                                            <div class="price-line">
                                                <em class="db price-now">￥<span class="money">4399</span>.00</em>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="td-amount">
                                    <div class="td-inner">
                                        <div class="item-amount ">
                                            <a href="#" class="db minus">-</a>
                                            <input type="text" value="1" class="text-amount"/>
                                            <a href="#" class="db plus">+</a>
                                        </div>
                                    </div>
                                </li>
                                <li class="td-sum">
                                    <div class="td-inner">
                                        <em class="tdinn">￥<span class="jine">4399</span>.00</em>
                                    </div>
                                </li>
                                <li class="td-op ">
                                    <div class="td-inner td-op1">
                                        <a href="#" class="btn-fav">移入收藏夹</a>
                                        <a href="#" class="btn-fav btn-re">删除</a>
                                        <div class="td-op2">
                                            <a href="#">相似宝贝</a>
                                            <i class="header-top-l-i db"></i>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--<div style="clear: both"></div>-->
                <!--商品内容部分-->
                <!--第三块-->
                <div class="outer-con">
                    <div>
                        <div class="outer-bbL fl">
                            <div class="kuang bjtu"></div>
                            <div class="xuan"></div>
                        </div> &nbsp;&nbsp;
                        <span class="db tmao bjtu"></span>
                        &nbsp;店铺：<a href="#" class="pinpai db">sanvaxi旗舰店</a>
                    <span class="db wwang">
                        <a href="#" class="db"></a>
                    </span>
                    <span class="db youhui bjtu">
                        <em>优惠券</em>
                        <i class="db bjtu"></i>
                        <div class="quan">
                            <i class="db bjtu quanbj"></i>
                            <div class="quanbj-con">
                                <i class="db bjtu2 quanbj-con-i"></i>
                                已领取<span>0</span> 张优惠券，有新优惠券可领取
                                <b class="db bjtu2 quanbj-con-b"></b>
                            </div>
                            <div class="quanbj-inn">
                                <div class="fl quanbj-inn-1 bjtu2">
                                    <span>¥</span>20
                                </div>
                                <div class="fl">
                                    <div class="fl xinxi">
                                        <p>满2500减20 满2500减20</p>
                                        <p>2017.02.09-2017.03.31</p>
                                    </div>
                                    <div class="fl">
                                        <span class="lingqu db">领取</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </span>
                    </div>
                    <!--详细信息-->
                    <div class="cont">
                        <div>
                            <ul>
                                <li class="td-cha">
                                    <div class="outer-bbL fr">
                                        <div class="kuang1 bjtu"></div>
                                        <div class="xuan1"></div>
                                    </div> &nbsp;&nbsp;
                                </li>
                                <li class="td-item">
                                    <div class="td-inner">
                                        <div class="fl td-pic">
                                            <a href="#"><img src="img/服装.jpg" alt=""/></a>
                                        </div>
                                        <div class="fl item-info">
                                            <div>
                                                <a href="#" class="db">
                                                    2017春季新款男士外套青年春秋装韩版修身薄款休闲夹克潮男装外衣
                                                </a>
                                            </div>
                                            <div>
                                                <div>
                                                    <p>
                                                        <img src="img/天猫家装节.jpg" alt=""/>
                                                    </p>
                                                </div>
                                                <div>
                                                <span class="db item-icon">
                                                    <img src="img/xcard.png" alt=""/>
                                                </span>
                                                    <a class="db item-icon">
                                                        <img src="img/7天退换.png" alt=""/>
                                                    </a>
                                                    <a class="db item-icon">
                                                        <img src="img/权益.png" alt=""/>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="td-info">
                                    <div class="item-props">
                                        <p class="sku-line">颜色：8535-黑色</p>
                                        <p class="sku-line">尺码：XL</p>
                                        <span class="db btn-sku bjtu2">修改</span>
                                    </div>
                                </li>
                                <li class="td-price">
                                    <div class="td-inner">
                                        <div class="price-content">
                                            <div class="price-line">
                                                <em class="db price-original">￥368.00</em>
                                            </div>
                                            <div class="price-line">
                                                <em class="db price-now">￥<span class="money">168</span>.00</em>
                                            </div>

                                        </div>
                                        <!--卖家降价-->
                                        <div class="price-proller">
                                            <div>
                                                卖家降价
                                                <i class="db bjtu cuxiao"></i>
                                            </div>
                                            <!--<div id="xinxi1">-->
                                            <!--<p>卖家降价：天猫家装节</p>-->
                                            <!--<p>优惠：￥200.00</p>-->
                                            <!--<p>比加入购物车时，又优惠了￥100.00</p>-->
                                            <!--</div>-->
                                        </div>
                                    </div>
                                </li>
                                <li class="td-amount">
                                    <div class="td-inner">
                                        <div class="item-amount ">
                                            <a href="#" class="db minus">-</a>
                                            <input type="text" value="1" class="text-amount"/>
                                            <a href="#" class="db plus">+</a>
                                        </div>
                                    </div>
                                </li>
                                <li class="td-sum">
                                    <div class="td-inner">
                                        <em class="tdinn">￥<span class="jine">168</span>.00</em>
                                    </div>
                                </li>
                                <li class="td-op ">
                                    <div class="td-inner td-op1">
                                        <a href="#" class="btn-fav">移入收藏夹</a>
                                        <a href="#" class="btn-fav btn-re">删除</a>
                                        <div class="td-op2">
                                            <a href="#">相似宝贝</a>
                                            <i class="header-top-l-i db"></i>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--<div style="clear: both"></div>-->
            </div>


        </div>
        <!--结算部分-->
        <!--<div style="clear: both"></div>-->
        <div class="con-foot">
            <div class="fl">
                <div class="outer-bbL fl">
                    <div class="kuang2 bjtu"></div>
                    <div class="xuan2"></div>
                </div> &nbsp;&nbsp;全选
            </div>
            <div class="fl">
                <a href="#" class="btn-remove">删除</a>
                <a href="#">清除失效宝贝</a>
                <a href="#">移入收藏夹</a>
                <a href="#">分享</a>
            </div>
            <div class="fr con-foot-R">
                <div class="fl">
                    <span class="num11">已选商品</span>
                    <em class="num1">0</em>
                    <span>件</span>
                    <div class="bjtu arrow-box db"></div>
                </div>
                <div class="fl">
                    合计（不含运费）：
                    <span> ￥<strong class="numm"><em class="num2">0</em>.00</strong></span>
                </div>
                <div class="fr jiesuan">
                    <a href="" class="db jiesuan1">结算</a>
                    <a href="" class="db jiesuan2">结算</a>
                </div>
            </div>
        </div>
        <!--感兴趣商品-->
        <div ng-app="myapp" ng-controller="mycon" id="box3">
            <p id="box3-t">
                <a href="{{x.myUrl}}" ng-repeat="x in datas">{{x.content}}</a>
            </p>
            <div id="box3-m"></div>
            <div ng-view="" ></div>
        </div>
        <script type="text/javascript">
            var myapp=angular.module("myapp",["ngRoute"]);
            myapp.controller("mycon",function($scope){
                $scope.datas=[
                    {myUrl:"#/name7",content:"掌柜热卖"},
                    {myUrl:"#/name8",content:"最近浏览的"},
                    {myUrl:"#/name9",content:"猜你喜欢的"}];
            });
            myapp.config(function($routeProvider){
                $routeProvider.when("/name7",{
                    templateUrl:"demo1.html"
                });
                $routeProvider.when("/name8",{
                    templateUrl:"demo2.html"
                });
                $routeProvider.when("/name9",{
                    templateUrl:"demo3.html"
                });
                $routeProvider.otherwise({
                    redirectTo:"/name7"
                });
            });
        </script>
    </section>
    <!--尾部-->
    <footer id="footer">
        <div class="footer">
            <!--内容部分-->
            <div class="footer-con-t">
                <p>
                    <span><a href="#">阿里巴巴集团</a></span><b>|</b>
                    <span><a href="#">淘宝网</a></span><b>|</b>
                    <span><a href="#">天猫</a></span><b>|</b>
                    <span><a href="#">聚划算</a></span><b>|</b>
                    <span><a href="#">全球速卖通</a></span><b>|</b>
                    <span><a href="#">阿里巴巴国际交易市场</a></span><b>|</b>
                    <span><a href="#">1688</a></span><b>|</b>
                    <span><a href="#">阿里妈妈</a></span><b>|</b>
                    <span><a href="#">飞猪</a></span><b>|</b>
                    <span><a href="#">阿里云计算</a></span><b>|</b>
                    <span><a href="#">YunOS</a></span><b>|</b>
                    <span><a href="#">阿里通信</a></span><b>|</b>
                    <span><a href="#">一淘</a></span><b>|</b>
                    <span><a href="#">万网</a></span><b>|</b>
                    <span><a href="#">高德</a></span><b>|</b>
                    <span><a href="#">UC</a></span><b>|</b>
                    <span><a href="#">友盟</a></span>
                </p>
                <p>
                    <span><a href="#">虾米</a></span><b>|</b>
                    <span><a href="#">阿里星球</a></span><b>|</b>
                    <span><a href="#">钉钉</a></span><b>|</b>
                    <span><a href="#">支付宝</a></span><b>|</b>
                    <span><a href="#">优酷</a></span><b>|</b>
                    <span><a href="#">土豆</a></span><b>|</b>
                    <span><a href="#">阿里健康</a></span><b>|</b>
                    <span><a href="#">阿里影业</a></span><b>|</b>
                    <span><a href="#">网商银行</a></span>
                </p>
            </div>
            <div class="footer-con-b">
                <p>
                    <span><a href="#">关于淘宝</a></span>
                    <span><a href="#">合作伙伴</a></span>
                    <span><a href="#">营销中心</a></span>
                    <span><a href="#">廉正举报</a></span>
                    <span><a href="#">联系客服</a></span>
                    <span><a href="#">开放平台</a></span>
                    <span><a href="#">诚征英才</a></span>
                    <span><a href="#">联系我们</a></span>
                    <span><a href="#">网站地图</a></span>
                    <span><a href="#">法律声明及隐私权政策</a></span>
                    <span><a href="#">知识产权</a></span>
                    <b>|</b><em>© 2003-2017 Taobao.com 版权所有</em>
                </p>
                <p>
                    <span><a href="#">网络文化经营许可证：浙网文[2013]0268-027号</a></span><b>|</b>
                    <span><a href="#">增值电信业务经营许可证：浙B2-20080224</a></span><b>|</b>
                    <span>信息网络传播视听节目许可证：1109364号</span><b>|</b>
                    <span>互联网违法和不良信息举报电话：0571-81683755 blxxjb@alibaba-inc.com</span>
                </p>
                <p>
                    <span>
                        <a href="#"><span class="banquan"></span>互联网药品信息服务资质证书编号：浙公网安备 33010002000078号</a>
                    </span>
                </p>
            </div>
        </div>
    </footer>
</div>

</body>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        /*搜索框点击事件*/
        $(".logo-R-L ul li").hover(function(){
            var index=$(this).index(".logo-R-L ul li");
            $(".logo-R-L ul li").eq(index).css("background","#f5f5f5");
            $(".logo-R-L ul li").click(function(){
                    $(".logo-R-L ul li").eq(index).show().siblings().hide();
            });
        },function(){
            $(".logo-R-L ul li").css("background","");
        });
        /*导航json*/
        $.ajax({
            url:"购物车.json",
            type:"get",
            data:"send",
            dataType:"json",
            success:function(data){
                /*导航 主体市场*/
                for(var c=0;c<data[0].name1.length;c++){
                    var lis=$("<li>");
                    $(".uls1").append(lis);
                    var as=$("<a href=''>").html(data[0].name1[c]);
                    $(lis).append(as);
                }
                /*在css中设置类名。直接添加类名即可*/
                var hotI=$("<i>").addClass("sitemap-icon sitemap-icon-new").appendTo($(".uls1 li").eq(2).children("a"));
                var hotI=$("<i>").addClass("sitemap-icon1 sitemap-icon-new").appendTo($(".uls1 li").eq(8).children("a"));

                /*导航 特色购物*/
                for(var c=0;c<data[0].name2.length;c++){
                    var lis=$("<li>");
                    $(".uls2").append(lis);
                    var as=$("<a href=''>").html(data[0].name2[c]);
                    $(lis).append(as)
                }
                var hotI=$("<i>").addClass("sitemap-icon1 sitemap-icon-new").appendTo($(".uls2 li").eq(1).children("a"));
                var hotI=$("<i>").addClass("sitemap-icon sitemap-icon-new").appendTo($(".uls2 li").eq(7).children("a"));
                /*导航 当前热点*/
                for(var c=0;c<data[0].name3.length;c++){
                    var lis=$("<li>");
                    $(".uls3").append(lis);
                    var as=$("<a href=''>").html(data[0].name3[c]);
                    $(lis).append(as)
                }
                var hotI=$("<i>").addClass("sitemap-icon sitemap-icon-new").appendTo($(".uls3 li").eq(4).children("a"));
                var hotI=$("<i>").addClass("sitemap-icon1 sitemap-icon-new").appendTo($(".uls3 li").eq(11).children("a"));
                /*导航 更多精彩*/
                for(var c=0;c<data[0].name4.length;c++){
                    var lis=$("<li>");
                    $(".uls4").append(lis);
                    var as=$("<a href=''>").html(data[0].name4[c]);
                    $(lis).append(as)
                }
                var hotI=$("<i>").addClass("sitemap-icon sitemap-icon-new").appendTo($(".uls4 li").eq(3).children("a"));
                var hotI=$("<i>").addClass("sitemap-icon1 sitemap-icon-new").appendTo($(".uls4 li").eq(12).children("a"));
            },
            error:function(){
                alert("失败");
            },
            async:true
        });
        /*plus 数量+；*/
        $(".plus").click(function(){
            var index=$(this).index(".plus");
            var y=$(".text-amount").eq(index).val();
            var x=$(".money").eq(index).html();//圆弧
            y++;
            $(".text-amount").eq(index).val(y);
            $(".jine").eq(index).html(x*y);
        });
        /*minus数量-*/
        $(".minus").click(function(){
            var index=$(this).index(".minus");
            var y=$(".text-amount").eq(index).val();
            var x=$(".money").eq(index).html();//圆弧
            y--;
            if(y<=1){
               y=1;
            }
            $(".text-amount").eq(index).val(y);
            $(".jine").eq(index).html(x*y);
        });
        /*购物车全选*/
        var type=true;
        $(".kuang2").click(function(){
                $(".kuang2").css("display","none");
                $(".xuan2").css("display","block");
                $(".kuang").css("display","none");
                $(".xuan").css("display","block");
                $(".kuang1").css("display","none");
                $(".xuan1").css("display","block");
                $(".jiesuan1").css("display","none");
                $(".jiesuan2").css("display","block");
            /*全选数量和金额*/
                nummm();
                nummn();
            /*全选删除点击事件*/
            $(".btn-remove").on("click",function(){
                alert("是否删除全部商品");
                if(type){
                    type=false;
                    $(".outer-boxx").hide(1000);
                }else{
                    type=true;
                    $(".outer-boxx").show(1000)
                }
            })
        });
        /*全选数量封装*/
        function nummm(){
            setInterval(function(){
                var sub=0;
                $(".text-amount").each(function(){
                    sub+=parseInt($(this).val());
                });
                $(".num1").html(sub);
            },50);
        }
        /*全选金额封装*/
        function nummn(){
            setInterval(function(){
                var suc=0;
                $(".jine").each(function(){
                    suc+=parseInt($(this).html());
                });
                $(".num2").html(suc);
            },50)
        }
        /*点击取消全选，*/
        $(".xuan2").on("click",function(){
            $(".xuan2").css("display","none");
            $(".kuang2").css("display","block");
            $(".kuang").css("display","block");
            $(".xuan").css("display","none");
            $(".kuang1").css("display","block");
            $(".xuan1").css("display","none");
            $(".jiesuan1").css("display","block");
            $(".jiesuan2").css("display","none");
//            $(".num1").replaceWith(nummm());

//            $(".num11").after(html(0));

        });
        /*当前商品点击事件*/
        $(".kuang").on("click",function(){
            var aA=$(this).index(".kuang");
            $(".kuang").eq(aA).css("display","none");
            $(".xuan").eq(aA).css("display","block");
            $(".kuang1").eq(aA).css("display","none");
            $(".xuan1").eq(aA).css("display","block");
            var numa=$(".jine").eq(aA).html();
            $(".num2").html(numa);
            var numb=$(".text-amount").eq(aA).val();
            $(".num1").html(numb);
        });
        $(".xuan").click(function(){
            var bB=$(this).index(".xuan");
            $(".xuan").eq(bB).css("display","none");
            $(".kuang").eq(bB).css("display","block");
            $(".xuan1").eq(bB).css("display","none");
            $(".kuang1").eq(bB).css("display","block");
            $(".num2").html(0);
            $(".num1").html(0);
        });
        /*购物车删除*/
        $(".btn-re").on("click",function(){
            var ind=$(this).index(".btn-re");
//            console.log(ind)
                $(".outer-con").eq(ind).slideUp(1000);
        })
    });
    /* 全部商品特效部分*/
    var lis2=document.getElementsByClassName("lis2")[0];
    var lis3=document.getElementsByClassName("lis3")[0];
    var aa=document.getElementById("aa");
    lis2.onmouseover=function(){
        aa.className="aab"
    };
    lis2.onmouseout=function(){
        aa.className="";

    };
    lis3.onmouseover=function(){
        aa.className="aac"
    };
    lis3.onmouseout=function(){
        aa.className="";
    };
</script>
</html>